import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import BillSummary from '../BillSummary/BillSummary'
import BillDetail from '../BillDetail/index'
/**
 * 类别：组件
 * 功能：银行卡
 */
class BillSection extends React.Component {

    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = {
            showBillOnTop : true,
            showBill : {
                month : '1yue',
                income: 155,
                pay : 428
            }
        }
    }


    componentDidMount() {

        const BillCollect = this.refs.BillCollect
        let timeoutId
        let that =  this;
        function callback() {
                var summary = BillCollect.firstElementChild
                const top = summary.getBoundingClientRect().top
                const screenTop = top - window.screen.height

                if (screenTop >= 64  ) {

                    return 
                }
                // BillCollect.offsetHeight //高度
                if (screenTop < 64 - BillCollect.offsetHeight) {

                    return 
                }
                // this.props.walletinfoActions.walletInfoUpdate({
                //     title: "billSummary",
                //     billSummary :this.props.bill
                // })


                console.log(summary.firstElementChild.firstElementChild.textContent);
                // that.setState({
                //     showBill : {
                //         month : summary.firstElementChild.firstElementChild.textContent,
                //         income : 777,
                //         pay : 888
                //     }
                // })
            
        }
        //监听滑动
        window.addEventListener('scroll', function () {
            if (timeoutId) {
                clearTimeout(timeoutId)
            }
            timeoutId = setTimeout(callback, 150)
        }.bind(this), false);
    }
    render() {
        const billList = this.props.billList|| []
        return  <div className="BillCollect" ref="BillCollect" >
                    <BillSummary bill={this.props.bill} />
                        {
                             this.props.bill.detail && this.props.bill.detail.length ? this.props.bill.detail.map((detail,index) => {
                                 return <BillDetail billDetail={detail} key={index}/>
                             }) : '暂无数据'
                        }
                </div>
            
    }
}

export default BillSection